<template>
    <div class="common_over_page">
        {{$i18n('cap.template.page.pageShow')}}
        <input type="text" class="common_over_page_txtbox" v-model="pageSize" @blur="changeSize">
        <span class="margin_r_20">{{$i18n('cap.template.business.page.show1', total)}}</span>
        <a href="javascript:;" class="common_over_page_btn pFirst" :class="{'is-disable' : page <= 1}" @click="goPage(1)">
            <em class="pageFirst"></em>
        </a>
        <a href="javascript:;" class="common_over_page_btn pPrev" :class="{'is-disable' : page -1 <= 0}" :title="$i18n('cap.template.query.prePage')" @click="goLeft">
            <em class="pagePrev"></em>
        </a>
        <span class="margin_l_10">{{$i18n('cap.template.business.page.text4')}}</span>
        <input type="text" class="common_over_page_txtbox" v-model="page">{{i18n('cap.template.business.page.text5')}}
        <a href="javascript:;" class="common_over_page_btn pNext" :class="{'is-disable' : page + 1 > getPages}" :title="$i18n('cap.template.query.nextPage')" @click="goRight">
            <em class="pageNext"></em>
        </a>
        <a href="javascript:;" class="common_over_page_btn pLast" :class="{'is-disable' : page >= getPages}" @click="goPage(getPages)">
            <em class="pageLast"></em>
        </a>
        <a href="javascript:void(0)" id="grid_go" class="common_button common_over_page_go margin_lr_10" @click="goPage(page)">go</a>
    </div>
</template>

<script>
export default {
    name: 'basePage',
    props: ['pageData'],
    data() {
        return {
            page: this.pageData.page,
            pageSize: this.pageData.pageSize
        };
    },
    computed: {
        getPages() {
            return Math.ceil(this.total / this.pageSize) || 0 
        },
        total() {
            return this.pageData.total
        }
    },
    methods: {
        goPage(index){
            if(!Number(index)) {
              index = 1
            }else if(index >= this.getPages) {
              index = this.getPages
            } else if(index < 1){
              index = 1;
            }
            this.page = index;
            this.$emit('pageEvent', this.pageSize, this.page)
        },
        changeSize() {
            if(!Number(this.pageSize)) {
                this.pageSize = 3;
            }
            this.$emit('pageEvent', this.pageSize, this.page)
        },
        goLeft(){
            if(this.page <= 1) return
            this.page --;
            this.$emit('pageEvent', this.pageSize, this.page)
        },
        goRight() {
            if(this.page >= this.getPages) return
            this.page ++ ;
            this.$emit('pageEvent', this.pageSize, this.page)
        }
    }
}
</script>

<style lang="scss" scoped>
.common_over_page{
    padding: 10px;
    text-align: right;
}
.common_over_page .is-disable{
    border: 1px solid #BEBEBE;
    color: #BEBEBE;
    cursor: not-allowed;
    background: #f9f9f9;
}

</style>